<template>
	<div class="recommend">
		<div class="recom" v-for="(item,index) in recommends" v-bind:key="index">
			<div class="recomimg">
				<p>{{item.img}}</p>
			</div>
			<div class="recomname">
				<p>{{item.name}}</p>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name:'recommend',
		props:{
			recommends:{
				type:Array,
				default(){
					return []
				}
			}
		}
		
	}
</script>
<style>
	.recommend{
		display:flex;
		flex-direction:row;
		justify-content: space-around
	}
	.recom{
		display: flex;
		flex-direction: column;
		margin: 5px
	}
	.recomimg{
		width: 50px;
		height: 50px;
		border-radius: 50%
	}
	.recomname{
		color: block;
		text-align: center;
	}
</style>